<template>
  <el-row style="text-align: center">
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <span style="float: left;width: 15%;" :disabled="true">
      <i class="el-icon-check"></i>绑定手机
    </span>
      <span style="margin-right: 30%;width: 20%;">
      {{ ruleForm.phone }}
      </span>
      <el-link type="primary" @click="dialogVisible=true">更换手机号</el-link>
    </div>
    <br>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <span style="float: left;width: 15%;" :disabled="true">
      <i class="el-icon-check"></i>设置密码
      </span>
      <span style="margin-right: 28%;width: 20%;">
        已设置
      </span>
      <el-link style="padding-left: 7%" type="primary" @click="dialogVisible1=true">修改密码</el-link>
    </div>
    <!--修改密码表单-->
    <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible1"
        width="45%">
      <el-form :model="editForm" status-icon :rules="rules1" ref="editForm" style="text-align: center"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="手机号" style="width: 60%;margin-left: 10%" prop="userTel">
          <el-input prefix-icon="el-icon-phone" :disabled="true" v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="width: 60%;margin-left: 10%" prop="password">
          <el-input prefix-icon="el-icon-lock" show-password type="password" v-model="editForm.password"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" style="width: 60%;margin-left: 10%" prop="userPassword">
          <el-input prefix-icon="el-icon-lock" show-password type="password" v-model="editForm.userPassword"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 60%;margin-left: 10%">
          <el-input prefix-icon="el-icon-loading" name="code" placeholder="请输入验证码" id="code"
                    v-model="editForm.code"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 20%">
          <el-button type="primary" @click="submitForm1('editForm')">提交</el-button>
        </el-form-item>
        <el-button type="primary" :disabled="disable1" style=" position: absolute;right: 12.5%; top: 20%;"
                   :class="{ codeGeting:isGeting1 }"
                   @click="getVerifyCode1">
          {{ getCode1 }}
        </el-button>
      </el-form>
    </el-dialog>
    <!--更换手机号表单-->
    <el-dialog
        title="更换手机号"
        :visible.sync="dialogVisible"
        width="45%">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" style="text-align: center"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="原手机号" style="width: 60%;margin-left: 10%" prop="phone">
          <el-input :disabled="true" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新手机号" style="width: 60%;margin-left: 10%" prop="userTel">
          <el-input v-model="ruleForm.userTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 60%;margin-left: 10%">
          <el-input prefix-icon="el-icon-loading" name="code" placeholder="请输入验证码" id="code"
                    v-model="ruleForm.code"></el-input>
        </el-form-item>
        <el-form-item style="margin-right: 20%">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
        <el-button type="primary" :disabled="disable" style=" position: absolute;right: 12.5%; top: 23%;"
                   :class="{ codeGeting:isGeting }"
                   @click="getVerifyCode">
          {{ getCode }}
        </el-button>
      </el-form>
    </el-dialog>
  </el-row>
</template>

<script>
import {Revamp} from "../api/user/user";

export default {
  name: "password",
  data() {
    //验证验证码
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'));
      } else if (this.ruleForm.code != this.param) {
        return callback(new Error('验证码不正确'));
      } else {
        callback()
      }
    };
    //验证更换的手机号
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        //  this.disable2 = true;
        return callback(new Error('手机号不能为空！！'));
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        //    this.disable2 = true
        return callback(new Error('手机号格式不正确！'));
      } else {
        // this.disable2 = false
      }
      this.$http.post('/user/user/query', {userTel: this.ruleForm.userTel}).then(result => {
        if (!result.data.toString()) {
          callback()
        } else {
          return callback(new Error('该手机号已注册！请换个号码'))
        }
      })
    };

    //新密码
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$])(.{8,20})$/.test(value)) {
        callback(new Error('密码应该由英文大小写、数字、符号组成，不少于8位'));
      } else {
        if (this.editForm.userPassword !== '') {
          this.$refs.editForm.validateField('userPassword');
        }
        callback();
      }
    };
    //确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.editForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkCode1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'));
      } else if (this.editForm.code != this.param1) {
        return callback(new Error('验证码不正确'));
      } else {
        callback()
      }
    };
    return {
      //短信验证码
      getCode: '获取验证码',
      isGeting: false,
      count: 60,
      disable: false,
      param: '',
      getCode1: '获取验证码',
      isGeting1: false,
      count1: 60,
      disable1: false,
      param1: '',
      //表单隐藏事件
      dialogVisible: false,
      dialogVisible1: false,
      //更换手机号绑定信息
      ruleForm: {
        userId: '',
        phone: '',
        userTel: '',
        code: '',
      },
      //更换手机号验证
      rules: {
        userTel: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        code: [
          {validator: checkCode, trigger: 'blur'}
        ],
      },
      editForm: {
        userId: '',
        phone: '',
        password: '',
        userPassword: '',
        code: '',
      },
      rules1: {
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        userPassword: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        code: [
          {validator: checkCode1, trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    var user = JSON.parse(sessionStorage.getItem('user'));
    if (user) {
      this.ruleForm.phone = user.userTel;
      this.editForm.phone = user.userTel;
      this.ruleForm.userId = user.userId;
      this.editForm.userId = user.userId;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.replacePhone();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.replacePassWord();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改密码
    replacePassWord() {
      var th = this;
      if (this.editForm.userId != null && this.editForm.userId != '') {
        Revamp(th.editForm).then(result => {
          if (result != 0) {
            th.dialogVisible1 = false;
            sessionStorage.clear();
            th.$router.push("/home");
          } else {
            this.$message.error("提交失败，请重新提交！")
          }
        })
      }
    },
    //更换手机号请求
    replacePhone() {
      var th = this;
      if (this.ruleForm.userId != null && this.ruleForm.userId != '') {
        Revamp(th.ruleForm).then(result => {
          if (result != 0) {
            th.dialogVisible = false;
            sessionStorage.clear();
            th.$router.push("/home");
          } else {
            this.$message.error("提交失败，请重新提交！")
          }
        })
      } else {
        this.$message.error("提交失败")
      }
    },
    //短信登陆
    getVerifyCode() {
      var vm = this;
      if (this.count = 60) {
        this.$http.post("user/send", {phone: vm.ruleForm.phone}).then(result => {
          console.log(result.data);
          vm.param = result.data.code.toString();
          console.log(vm.param);
        })
      }
      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 60
          this.param = ''
          this.$message.error("验证码已过期")
          clearInterval(countDown);
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000)
    },
    //修改密码短信
    getVerifyCode1() {
      var vm = this;
      if (this.count1 = 60) {
        this.$http.post("user/send", {phone: vm.editForm.phone}).then(result => {
          vm.param1 = result.data.code.toString();
          console.log(vm.param1);
        })
      }
      var countDown = setInterval(() => {
        if (this.count1 < 1) {
          this.isGeting1 = false
          this.disable1 = false
          this.getCode1 = '获取验证码'
          this.count1 = 60
          this.param1 = ''
          this.$message.error("验证码已过期")
          clearInterval(countDown);
        } else {
          this.isGeting1 = true
          this.disable1 = true
          this.getCode1 = this.count1-- + 's后重发'
        }
      }, 1000)
    },
  }
}
</script>

<style scoped>
.s1 {
  margin: 10px 0px;
  /*height: 150px;*/
}

.input1 {
  width: 450px;
}

.input2 {
  width: 340px;
  margin: 10px 0px;
}

.bu1 {
}

.input3 {
  width: 450px;
  margin: 10px 0px;
}
</style>
